<template>
	<div class="box">
		<el-card class="card-css">
			<div class="zhpj">
				<span class="zhpj-span">报表打印</span>
			</div>

			<div class="table-css">
				<div class="btn-css">
					<el-button type="success" @click="dialogVisible = true"
						>自定义</el-button
					>
				</div>
				<div class="select01">
					<el-select placeholder="商场">
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</div>

				<div class="select02">
					<el-select placeholder="一小时">
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</div>

				<div class="block">
					<el-date-picker
						v-model="value1"
						type="daterange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					/>
				</div>

				<div class="btn-01">
					<el-button type="primary">下 载</el-button>
				</div>
				<div class="btn-02">
					<el-button type="primary">打 印</el-button>
				</div>
			</div>

			<div class="table">
				<el-table
					:data="tableData"
					style="width: 100%"
					:header-cell-style="{
						'text-align': 'center',
						background: '#B4C7E7',
					}"
					:cell-style="{
						'text-align': 'center',
						background: '#f5f8fb',
					}"
				>
					<el-table-column prop="date" label="时间" width="150" />
					<el-table-column
						prop="comprehensive"
						label="综合指数"
						width="120"
					>
						<template v-slot:header
							>综合指数 <el-checkbox /> </template
					></el-table-column>

					<el-table-column label="温度℃">
						<el-table-column prop="temperature_indoor" label="室内"
							><template v-slot:header
								>室内<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="temperature_outdoor" label="室外"
							><template v-slot:header
								>室外<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="temperature_point1" label="测点1"
							><template v-slot:header
								>测点1<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="temperature_point2" label="测点2"
							><template v-slot:header
								>测点2<el-checkbox /> </template
						></el-table-column>

						<template v-slot:header>温度℃ <el-checkbox /> </template
					></el-table-column>
					<el-table-column label="湿度%">
						<el-table-column prop="humidity_indoor" label="室内"
							><template v-slot:header
								>室内<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="humidity_outdoor" label="室外"
							><template v-slot:header
								>室外<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="humidity_point1" label="测点1"
							><template v-slot:header
								>测点1<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="humidity_point2" label="测点2"
							><template v-slot:header
								>测点2<el-checkbox /> </template
						></el-table-column>
						<template v-slot:header>湿度%<el-checkbox /> </template>
					</el-table-column>
					<el-table-column label="CO₂  ppm">
						<el-table-column prop="co_indoor" label="室内"
							><template v-slot:header
								>室内<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="co_outdoor" label="室外"
							><template v-slot:header
								>室外<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="co_point1" label="测点1"
							><template v-slot:header
								>测点1<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="co_point2" label="测点2"
							><template v-slot:header
								>测点2<el-checkbox /> </template
						></el-table-column>
						<template v-slot:header
							>CO₂ ppm<el-checkbox />
						</template>
					</el-table-column>
					<el-table-column label="PM2.5  µg/m³">
						<el-table-column prop="pm_indoor" label="室内"
							><template v-slot:header
								>室内<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="pm_outdoor" label="室外"
							><template v-slot:header
								>室外<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="pm_point1" label="测点1"
							><template v-slot:header
								>测点1<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="pm_point2" label="测点2"
							><template v-slot:header
								>测点2<el-checkbox /> </template
						></el-table-column>
						<template v-slot:header
							>PM2.5 µg/m³<el-checkbox />
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination
						v-model:currentPage="currentPage3"
						v-model:page-size="pageSize3"
						:small="small"
						:disabled="disabled"
						:background="background"
						layout="prev, pager, next, jumper"
						:total="1000"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</el-card>

		<!-- 自定义弹框 -->
		<el-dialog
			v-model="dialogVisible"
			title="自定义"
			width="504px"
			:before-close="handleClose"
			class="zdyDialog"
		>
			<div class="checkbox-div">
				<div>
					<el-checkbox v-model="checked1" label="全选" size="large" />
				</div>

				<div>
					<el-checkbox v-model="checked1" label="时间" size="large" />
				</div>

				<div>
					<el-tree
						:data="testdata"
						ref="tree"
						show-checkbox
						:check-strictly="true"
						node-key="id"
						:props="defaultProps"
						@check-change="treeCheckedChange"
					>
					</el-tree>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false" class="quxiao-btn"
						>取消</el-button
					>
					<el-button
						type="primary"
						@click="dialogVisible = false"
						class="sava-btn"
						>保存</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref } from "vue";
let dialogVisible = ref(false);
let testdata = ref([
	{
		label: "温度°C",
		children: [
			{
				label: "室内",
			},
			{
				label: "室外",
			},
			{
				label: "测点1",
			},
			{
				label: "测点2",
			},
		],
	},
	{
		label: "湿度%",
		children: [
			{
				label: "室内",
			},
			{
				label: "室外",
			},
			{
				label: "测点1",
			},
			{
				label: "测点2",
			},
		],
	},
	{
		label: "COppm",
		children: [
			{
				label: "室内",
			},
			{
				label: "室外",
			},
			{
				label: "测点1",
			},
			{
				label: "测点2",
			},
		],
	},
	{
		label: "PM2.5µg/m³",
		children: [
			{
				label: "室内",
			},
			{
				label: "室外",
			},
			{
				label: "测点1",
			},
			{
				label: "测点2",
			},
		],
	},
]);
const tableData = ref([
	{
		date: "2016-05-03",
		comprehensive: "Tom",
		temperature_indoor: "California",
		temperature_outdoor: "Los Angeles",
		temperature_point1: "No. 189, Grove St, Los Angeles",
		temperature_point2: "CA 90036",
		humidity_indoor: "测试数据",
		humidity_outdoor: "测试数据",
		humidity_point1: "测试数据",
		humidity_point2: "测试数据",
		co_indoor: "测试数据",
		co_outdoor: "测试数据",
		co_point1: "测试数据",
		co_point2: "测试数据",
		pm_indoor: "测试数据",
		pm_outdoor: "测试数据",
		pm_point1: "测试数据",
		pm_point2: "测试数据",
	},
	{
		date: "2016-05-03",
		comprehensive: "Tom",
		temperature_indoor: "California",
		temperature_outdoor: "Los Angeles",
		temperature_point1: "No. 189, Grove St, Los Angeles",
		temperature_point2: "CA 90036",
		humidity_indoor: "测试数据",
		humidity_outdoor: "测试数据",
		humidity_point1: "测试数据",
		humidity_point2: "测试数据",
		co_indoor: "测试数据",
		co_outdoor: "测试数据",
		co_point1: "测试数据",
		co_point2: "测试数据",
		pm_indoor: "测试数据",
		pm_outdoor: "测试数据",
		pm_point1: "测试数据",
		pm_point2: "测试数据",
	},
	{
		date: "2016-05-03",
		comprehensive: "Tom",
		temperature_indoor: "California",
		temperature_outdoor: "Los Angeles",
		temperature_point1: "No. 189, Grove St, Los Angeles",
		temperature_point2: "CA 90036",
		humidity_indoor: "测试数据",
		humidity_outdoor: "测试数据",
		humidity_point1: "测试数据",
		humidity_point2: "测试数据",
		co_indoor: "测试数据",
		co_outdoor: "测试数据",
		co_point1: "测试数据",
		co_point2: "测试数据",
		pm_indoor: "测试数据",
		pm_outdoor: "测试数据",
		pm_point1: "测试数据",
		pm_point2: "测试数据",
	},
]);
</script>

<style lang="less" scoped>
.box {
	display: flex;
	.card-css {
		flex: 1;
		width: 1760px;
		height: 817px;
		position: relative;
		.zhpj {
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 100%;
			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}
		.table-css {
			display: flex;
			margin-top: 66px;
			justify-content: flex-end;
			.select01 {
				width: 100px;
			}
			.select02 {
				width: 100px;
				margin-right: 20px;
				margin-left: 20px;
			}
			.btn-01 {
				margin-left: 20px;
				margin-right: 20px;
			}
			.el-button {
				background-color: #8faadc;
				border-color: #8faadc;
			}
			.btn-css {
				flex-grow: 1;
			}
		}
	}

	.table {
		margin-top: 20px;

		.el-checkbox {
			top: 3px;
			margin-left: 5px;
		}
	}
	.pagination {
		display: flex;
		justify-content: flex-end;
	}
}

.sava-btn {
	border-color: #8faadc;
	background-color: #8faadc;
}
.quxiao-btn {
	border-color: #cccccc;
	background-color: #cccccc;
	color: #fff;
}
:deep(.el-dialog__title) {
	color: #4d62a5;
}
:deep(.el-tree-node.is-expanded > .el-tree-node__children) {
	display: inline-flex;
}
.checkbox-div > div {
	margin-bottom: 2px;
}
:deep(.el-tree-node__content) {
	margin-bottom: 8px;
}

:deep(.el-dialog__body) {
	border-top: 1px solid #e7eaf3;
	border-bottom: 1px solid #e7eaf3;
}
</style>
